
import { Checkbox } from 'react-vant';
import IconFont from './IconFont.jsx'
import { useNavigate } from 'react-router-dom';
import React, { useEffect } from 'react'
import '../../../scss/fan/fotter.scss'

export default function Loginfotter() {
    // 控制展示隐藏
    let [show, setshow] = React.useState(1);
    let navigate = useNavigate();
    let [checked, useSetState] = React.useState(false);
    // 切换事件
    let iconclick = (index) => {
        console.log(index);
        if (index == 1) {
            navigate('/fan/phone')
            setshow(index,'1')
        }else if (index == 2) {
            navigate('/fan/register')
        }else if (index == 3) {
            navigate('/fan/face')
        }else if (index == 4) {
            navigate('/fan/login')
        }
    }
    return (
        <div id="fotter">
            
            <div className='fotter-l'>其他登录方式</div>
            <div className='fotter-l ace'>
                {/* 手机号 icon-tubiao- */}


                    <IconFont type='icon-shoujidenglu-copy' className='icon' onClick={() => {iconclick(1) }} />
              
                {/* 人脸 icon-renlianshibie */}

                    <IconFont type='icon-renlianshibie' className='icon' onClick={() => {iconclick(3) }}  />
                
                {/* 密码 icon-ziyuan24*/}

                    <IconFont type='icon-miyue' className='icon'  onClick={() => { iconclick(4)}} />
                
                  
                {/* qq icon-zu */}

                <IconFont type='icon-tianjia' className='icon'  onClick={() => {iconclick(2) }} />
                
                
            </div>
            <div className='fotter-l'>
                {/* <Checkbox
                    defaultChecked
                    checkedColor='#1684FC'
                    iconSize='12px'
                    shape='square'
                    checked={checked}
                    onChange={useSetState(!checked)}
                >
                </Checkbox> */}
                我已阅读并同意
                <span className='protocol'>《服务协议》</span>
                和
                <span className='protocol'>《个人信息保护指引》</span>
            </div>
        </div>
    )
}
